<template>
    <div class="layout" :class="{'layout-hide-text': spanLeft < 5}">
        <Row type="flex">
            <i-col :span="spanLeft" class="layout-menu-left" v-if="spanLeft==5">
                <Menu active-name="新闻导航" :open-names="['新闻导航']" theme="dark" width="auto" @on-select="select" ref="menuNav">
                    <div class="layout-logo-left">logo 平台管理 </div>
                    <Submenu :name="val.name" v-if="navData" v-for="(val,index) in navData.data" :key="val.id">
                        <template slot="title">
                            <Icon type="ios-navigate"></Icon>
                            {{val.name}}
                        </template>
                        <Menu-item :name="val.name+'//'+(val2.name)+'//'+val2.path" v-for="(val2,index2) in val.subNav" :key='val2.id' :aa="val.name+'//'+(val2.name)+'//'+val2.path">
                            {{val2.name}}
                        </Menu-item>
                    </Submenu>
    
                </Menu>
            </i-col>
            <i-col :span="spanRight" class="layout-menu-right">
                <div class="layout-breadcrumb">
                    <i-button type="text" @click="toggleClick">
                        <Icon type="navicon" size="32"></Icon>
                    </i-button>
                    <Breadcrumb>
                        <Breadcrumb-item href="/">
                            <Icon type="ios-home-outline"></Icon> 后台管理
                        </Breadcrumb-item>
                        <Breadcrumb-item href="/components/breadcrumb" v-if="navInfo">
                            <Icon type="social-buffer-outline"></Icon> {{navInfo.nav}}
                        </Breadcrumb-item>
                        <Breadcrumb-item>
                            <Icon type="pound"></Icon> {{navInfo.subNav}}
                        </Breadcrumb-item>
                    </Breadcrumb>
                </div>
                <div class="layout-content">
                    <div v-if="test">test
                        <div v-html="test.data.html"></div>
                    </div>
                    <transition name="fade">
                        <router-view></router-view>
                    </transition>
                </div>
            </i-col>
        </Row>
    </div>
</template>

<style lang="less">
.test {
    background: blue;
    img {
        width: 200px;
    }
}

.layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    padding-top: 48px;
    padding-bottom: 48px;
    height: 100%;
    box-sizing: border-box;
    .layout-menu-left {
        overflow-y: scroll;
    }
    .layout-content {
        overflow-y: scroll;
        min-height: 200px;
        margin: 15px;
        background: #fff;
        border-radius: 4px;
        padding-top: 58px;
        height: 100%;
    }
    .layout-menu-right {
        position: relative;
    }
}

.layout-breadcrumb {
    padding: 10px 15px 0;
    height: 58px;
    position: absolute;
    top: 0;
    left: 0;
}

.layout-content {}

.layout-content-main {
    padding: 10px;
}

.layout-copy {
    text-align: center;
    padding: 10px 0 20px;
    color: #9ea7b4;
}

.layout-menu-left {
    background: #464c5b;
}

.layout-header {
    height: 60px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}

.layout-logo-left {
    width: 90%;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    margin: 15px auto;
}

.layout-ceiling-main a {
    color: #9ba7b5;
}

.layout-hide-text .layout-text {
    display: none;
}

.ivu-col {
    transition: width .2s ease-in-out;
}

.ivu-row-flex {
    height: inherit;
}

.ivu-breadcrumb {
    display: inline-block;
}

.layout-logo-left {
    color: #fff;
    height: 30px;
    line-height: 30px;
    padding-left: 2em;
}
</style>


<script>
import { mapGetters } from 'vuex';
import { mapActions } from 'vuex';
export default {
    data() {
        return {
            spanLeft: 5,
            spanRight: 19,
            navTree: '',
            nav: '',
            subNav: '',
            test: ''
        }
    },
    computed: {
        iconSize() {
            return this.spanLeft === 5 ? 14 : 24;
        },
        navData() {
            return this.$store.getters.getNavTree;
        },
        navInfo() {
            return this.$store.getters.getNavInfo;
        }
    },
    methods: {
        ...mapActions([
            'saveNavTree'
        ]),
        toggleClick() {
            if (this.spanLeft === 5) {
                this.spanLeft = 2;
                this.spanRight = 24;
            } else {
                this.spanLeft = 5;
                this.spanRight = 19;
            }
        },
        getTest() {
            this.axios.get('/test.json').then(response => {
                this.test = response.data;
            }).catch(response => {
                console.log(response)
                this.$Message.error('数据获取失败！', 1);
            });
        },
        getNav(path) {
            this.axios.get('/navTree.json')
                .then(response => {
                    this.saveNavTree(response.data);
                    var nav = '';
                    var subNav = '';
                    var _data = response.data.data;
                    outerloop:
                    for (var index in _data) {
                        for (var key in _data[index].subNav) {
                            if (_data[index].subNav[key].path == path.split('/')[2]) {
                                nav = _data[index].name;
                                subNav = _data[index].subNav[key].name;
                                break outerloop;
                            }

                        }
                    }
                    this.$store.dispatch('saveNavInfo', { nav: nav, subNav: subNav, path: path.split('/')[2] });

                    console.log(nav, subNav)

                })
                .catch(response => {
                    console.log(response)
                    this.$Message.error('数据获取失败！', 1);
                });

        },
        select(name) {
            var _name = name.split('//');
            this.nav = _name[0];
            this.subNav = _name[1];
            this.$store.dispatch('saveNavInfo', { nav: _name[0], subNav: _name[1] });
            this.$router.push('/main/' + _name[2]);
        }
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            vm.getNav(to.path);
            console.log(vm.navData)
        })
    },
    created() {
        var that = this;
        this.$nextTick(() => {
            console.log(that.$refs.menuNav, 888888)
            this.$refs.menuNav.updateActiveName();
        })
        this.getTest();
    }
}
</script>
